//
//  FeedCell.swift
//  TikTok
//
//  Created by Vitor Henrique Barreiro Marinho on 04/11/24.
//

import SwiftUI

struct FeedCell: View {
    let post: MainPica
    @State private var rotation: Double = 0  // 用于追踪旋转角度
    @State private var searchText: String = ""
    @ObservedObject private var playbackManager = VideoPlaybackManager.shared
    @State private var isVisible = false  // 追踪可见性
    
    init(post: MainPica) {
        self.post = post
    }
    
    
    
    var body: some View {
        
        ZStack {
            VStack{
                KSVideoPlayerWrapper(
                    videoURL: post.url, 
                    videoType: post.video_type,
                    videoId: String(post.id),
                    shouldAutoPlay: playbackManager.shouldPlay(videoId: String(post.id))
                )
                HStack {
                    Spacer()
                    TextField("你来说两句...", text: $searchText) // 绑定 FocusState
                        .padding(8)
                        .background(Color("BgColor2"))
                        .cornerRadius(10)
                        .frame(height: 40)
                        .foregroundColor(.white)
                    
                    Spacer()
                    Button {

                    } label: {
                        Image(systemName: "arrow.left.and.right.circle")
                            .font(.system(size: 30))
                            .foregroundStyle(.white)
                    }
                    .padding(10)
                }
                .padding(.bottom,20)
           
                
            }
            
            
            VStack {
                Spacer()
                
                HStack(alignment: .bottom) {
//                    VStack(alignment: .leading) {
//                        Text(post.name)
//                            .lineLimit(1)
//                            .fontWeight(.semibold)
//                            .font(.system(size: 20))
//                        
//                        Text(post.desc)
//                            .lineLimit(3)
//                            .foregroundColor(.gray)
//                        
//                    }
//                    .foregroundStyle(.white)
//                    .font(.subheadline)
                    
                    Spacer()
                    
                    VStack(spacing: 20) {
                        
                        CachedImageView(imageURL: post.cover)
                            .scaledToFill()
                            .clipped()
                            .frame(width: 48, height: 48)
                            .clipShape(Circle())
                            .rotationEffect(.degrees(isVisible ? rotation : 0))  // 只在可见时旋转
                            .onAppear {
                                isVisible = true
                                // 启动一个循环动画，使图像持续旋转
                                withAnimation(
                                    Animation.linear(duration: 3).repeatForever(autoreverses: false)
                                ) {
                                    rotation = 360  // 持续旋转360度
                                }
                            }
                            .onDisappear {
                                isVisible = false
                            }
                        // 显示当前播放时间和总时长
                        
                        
                        
                        Button {
                            
                        } label: {
                            VStack {
                                Image(systemName: "heart.fill")
                                    .resizable()
                                    .frame(width: 28, height: 25)
                                    .foregroundStyle(.white)
                                
                                Text("\(post.read_count)")
                                    .font(.caption)
                                    .foregroundStyle(.white)
                                    .bold()
                                
                            }
                        }
                        
                        Button {
                            
                        } label: {
                            
                            VStack {
                                Image(systemName: "ellipsis.bubble.fill")
                                    .resizable()
                                    .frame(width: 28, height: 25)
                                    .foregroundStyle(.white)
                                
                                Text("\(post.like_count)")
                                    .font(.caption)
                                    .foregroundStyle(.white)
                                    .bold()
                            }
                        }
                        
                        Button {
                            
                        } label: {
                            
                            VStack {
                                Image(systemName: "bookmark.fill")
                                    .resizable()
                                    .frame(width: 28, height: 25)
                                    .foregroundStyle(.white)
                                
                                Text("\(post.read_count)")
                                    .font(.caption)
                                    .foregroundStyle(.white)
                                    .bold()
                            }
                            
                        }
                    }
                }
                .padding(.bottom, 100)
            }
            .onAppear {
                // 确保视频开始播放（参考DetailView的成功模式）
                print("🎬 FeedCell出现，开始播放: \(post.id)")
                playbackManager.startPlaying(videoId: String(post.id))
            }
            .onDisappear {
                // 视频自动暂停
                print("⏸️ FeedCell消失，暂停视频: \(post.id)")
            }
            .padding()
        }
        .containerRelativeFrame([.horizontal, .vertical])
        .background(.black)
        
    }
    
    
    
}

#Preview {
    FeedCell(post: mainpicas[0])
}



